<ngx-datatable
  class="material"
  [headerHeight]="headerHeight"
  [rowHeight]="rowHeight"
  columnMode="force"
  [rows]="partition?.replicas">
  <ngx-datatable-column
    name="Replica"
    [width]="80"
    [resizeable]="false"
    [canAutoResize]="false">
    <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
      <strong>#{{ rowIndex + 1 }}</strong>
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column
    name="Instance"
    prop="instanceName">
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
      <a mat-icon-button
        color="accent"
        [routerLink]="['../../..', 'instances', value, 'resources']">
        <mat-icon>arrow_forward</mat-icon>
      </a>
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column
    name="External View"
    [width]="120"
    [resizeable]="false"
    [canAutoResize]="false">
    <ng-template let-row="row" ngx-datatable-cell-template>
      <hi-state-label [state]="row.externalView" [isReady]="row.externalView && row.externalView == row.idealState"></hi-state-label>
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column
    name="Ideal State"
    [width]="120"
    [resizeable]="false"
    [canAutoResize]="false">
    <ng-template let-row="row" ngx-datatable-cell-template>
      <hi-state-label [state]="row.idealState" [isReady]="row.externalView && row.externalView == row.idealState"></hi-state-label>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>
